<template>
  <div >
<!--        <div style="margin-bottom: 10px">-->
<!--          <el-breadcrumb spearator="">-->
<!--            <el-breadcrumb-item :to="{path:'/'}">新闻管理</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item></el-breadcrumb-item>-->
<!--          </el-breadcrumb>-->
<!--        </div>-->

        <div style="margin: 0px">
          <el-input style="width: 200px" placeholder="请输入标题" suffix-icon="el-icon-search" v-model="title"></el-input>
          <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
          <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="danger" @click="delBatch">批量删除<i class="el-icon-remove-outline"></i></el-button>
          <el-button type="primary">导入<i class="el-icon-bottom"></i></el-button>
          <el-button type="primary">导出<i class="el-icon-top"></i></el-button>
        </div>

        <el-table :data="tableData" border stripe  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="100"></el-table-column>
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="title" label="标题" width="250"></el-table-column>
          <el-table-column prop="author" label="作者" width="200"></el-table-column>
          <el-table-column prop="time" label="时间" width="200"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="details(scope.row)">详情<i class="el-icon-edit"></i></el-button>
              <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
              <el-popconfirm
                  class="ml-10"
                  confirm-button-text='确定'
                  cancel-button-text='我再考虑一下'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="del(scope.row.id)"
              >
                <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>

        <el-dialog title="信息" :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
          <el-form label-width="120" size="small">
            <el-form-item ref="upload" label="标题">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>

            <div id = "div富文本"></div>

<!--            <el-form-item ref="upload" label="内容">-->
<!--              <el-input v-model="form.content" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="cancel">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="vis" width="50%" :close-on-click-modal="false">
          <el-card>
            <div v-html="detail.content" style="min-height: 150px"></div>
          </el-card>
        </el-dialog>

  </div>


</template>
<script>

import E from 'wangeditor'
import Aside from '@/components/Aside.vue';

let editor;   //全局设定
export default {
  name: 'News',
  data() {
    return {
      tableData: [],    //表格数据
      total: 0,
      pageNum: 1,
      pageSize: 10,
      title: "",    //标题
      form:{}, //form表单
      dialogFormVisible:false,  //弹窗
      collapseBtnClass: "el-icon-s-fold",//关闭按钮
      isCollapse: false,  //侧边栏折叠
      sideWidth: 200,
      logoTextShow: true, //侧边栏标题文本显示
      detail:{},    //详情按钮内容数据
      vis: false    //详情按钮内容展示
    }
  },
  mounted(){
    //页面所有信息加载完毕再加载这个
  },
  created() {
    //请求分页查询数据
    this.load()
  },

  methods: {

    details(row){//详情按钮里的
      this.detail = row;
      this.vis = true;//把弹窗开启
    },
    fileUploadSuccess(res) {
      console.log(res)
      this.form.url = res;
    },
    collapse() { //点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) { //收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      } else { //展开
        this.sideWidth = 160
        this.collapseBtnClass = "el-icon-s-fold"
        this.logoTextShow = true
      }
    },
    load() {
      this.request.get("/News/page", {
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.records
        this.total = res.total
      })
    },

    // add(){
    //   this.dialogFormVisible = true
    //   this.form = {}
    // },

    save() {
      // console.log(editor.txt.html())//在html上打印页面获取输入的内容
      this.form.content = editor.txt.html();//获取编辑器里面的值，然后赋予到实体当中

      this.request.post("/News/",this.form).then(res =>{
        if(res){
          this.$message.success("保存成功")
          this.dialogFormVisible = false //关闭窗口
          this.load() //刷新表格数据
        }else {
          this.$message.error("保存失败")
        }
      })

      let userStr = sessionStorage.getItem("user") || "{}"
      let user = JSON.parse(userStr)
      this.form.author = user.nickName    //获取名字

    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}

      this.$nextTick(() => {  //异步加载，使延缓加载的东西也能出现
        // const editor = new E('#div富文本')
//  let editor     在上面设置全局
        editor = new E('#div富文本')

        // 配置 server 接口地址 //图片上传============================================
        editor.config.uploadImgServer = 'http://localhost:9090/file/editor/upload'
        editor.config.uploadFileName = 'file'   //设置上传参数名称

        editor.create()

        //使用 editor.txt.clear() 清空编辑器内容。
        })
      editor.txt.clear()
      this.$refs['upload'].clearFiles() //清除历史文件列表

    },
    handleEdit(row) {//编辑按钮
      this.form = row
      this.dialogFormVisible = true
      this.$nextTick(() => {  //异步加载，使延缓加载的东西也能出现
          // const editor = new E('#div富文本')
        if (!editor) {
//    let editor     在上面设置全局
          editor = new E('#div富文本')

          // 配置 server 接口地址 //图片上传============================================
          editor.config.uploadImgServer = 'http://localhost:9090/file/editor/upload'
          editor.config.uploadFileName = 'file'   //设置上传参数名称

          editor.create()
        }
          editor.txt.html(row.content)
          //创建编辑器之后，使用 editor.txt.html(...) 设置编辑器内容。
          })
        editor.txt.clear()
        this.$refs['upload'].clearFiles() //清除历史文件列表
    },
    cancel() {
      this.dialogFormVisible = false
      this.load()
    },
    del(id){
      this.request.delete("/News/" + id).then(res => {
        if(res){
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val){
      console.log()
      this.multipleSelection = val
    },
    delBatch(){
      let ids = this.multipleSelection.map(v => v.id)  // [1.2.3]
      this.request.post("/News/del/batch", ids).then(res => {
        if(res){
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset(){
      this.title = ""
      this.load()
    },
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>
